<template>
    <div class="item" :class="{
        'is-candies': x === candies.x && y === candies.y,
        'is-snake': snake.find(i => i.x === x && i.y === y),
    }">
    </div>
</template>
<script setup>
import { computed } from "vue"

const props = defineProps({
    x: Number,
    y: Number,
    snake: Array,
    candies:Object
})
</script>
<style scoped lang="scss">
.item {
    $borderWidth: 0.08rem;
    width: calc(var(--size) - 2 * $borderWidth);
    height: calc(var(--size) - 2 * $borderWidth);
    border: $borderWidth solid var(--color);
    border-radius: 3 * $borderWidth;
    color: var(--color);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    font-size: calc(var(--size) / 1.6);

    
    &.is-snake {
        border-color: var(--snake-color);
        background-color: var(--snake-color);
    }
    &.is-candies {
        background-color: var(--color);
    }

}
</style>